<template>
	<view>
		<view class="title">
			<view class="bl"></view>添加银行卡
		</view>
		<view class="dev-box base-info">
			<view class="info-item">
				<view class="text">银行名称</view>
				<view class="select-box">
					<picker @change="selectbankName" :value="bankName" :range="bankNameArray">
						<input class="padding-20" disabled="true" placeholder="请选择银行" :value="bankName" style="margin-left:20upx"/>
					</picker>
					
				</view>
				<!-- <view class="select-box"  @click="selectType"><text :style="subType==''?'color:gray':''">{{subType==''?"请选择":subType}}</text></view> -->
			</view>
			<view class="info-item">
				<view class="text">银行卡号</view>
				<iInput v-model="bankNum" type="text"  placeholder="请填写银行卡号"></iInput>
			</view>
			<view class="info-item">
				<view class="text">姓名</view>
				<iInput v-model="userInfo.name" type="text" maxlength="11"  isEdit="true"></iInput>
			</view>
			
		</view>
		<button class="submitBtn" @click="addBankCard">立即提交</button>
		<lyy-pass-input ref="passInput" title="添加银行卡"  @confirm="confirm" @close="close"> </lyy-pass-input>
	</view>
</template>

<script>
	import iInput from '@/components/watch-login/info-input.vue'; //input
	import { mapState, mapMutations, mapGetters } from 'vuex';
	export default {
		components: {
			iInput
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				bankNum:"",
				name:"",
				bankName:"",
				bankNameArray:["中国银行","中国建设银行","中国工商银行","中国农业银行","中国邮政储蓄银行","交通银行","中信银行"]
			}
		},
		onShow() {
			let that = this
			if(this.userInfo.name==""||this.userInfo.name==null){
				uni.showModal({
					title:"提示",
					content:"请先完善个人信息",
					success:function(res){
					
									if (res.confirm) {
											uni.navigateTo({
											            //保留当前页面，跳转到应用内的某个页面
											            url: '/pages/my/editInfo'
											        })
										} else if (res.cancel) {
											// uni.redirectTo({
											//             //保留当前页面，跳转到应用内的某个页面
											//             url: '/pages/my/withdrawal/withdrawal'
											//         })
										}
					}
				})
			}
		},
		methods: {
			selectbankName(e){
				this.bankName = this.bankNameArray[e.target.value];
			},
			addBankCard(){
				if(this.bankName==""||this.bankName==null){
					uni.showToast({
						title:"请选择银行！",
						icon:"error",
						duration:1000
					})
					return
				}
				if(this.bankNum==""||this.bankNum==null){
					uni.showToast({
						title:"请输入银行卡号！",
						icon:"error",
						duration:1000
					})
					return
				}
				if(this.userInfo.name==""||this.userInfo.name==null){
					uni.showModal({
						title:"提示",
						content:"请先完善个人信息",
						success:function(res){
							uni.navigateTo({
							            //保留当前页面，跳转到应用内的某个页面
							            url: '/pages/my/editInfo'
							        })
						}
					})
					return
				}
				this.$refs["passInput"].open();
			},
			async confirm(obj){
				let params={
					bankName:this.bankName,
					bankNum:this.bankNum,
					name:this.userInfo.name,
					payPassword:obj.pass
				}
				let data=await this.$apis.userBankAdd(params)
				console.log(data)
				if(data){
					setTimeout(() => {
						uni.showToast({
							title: '添加成功！',
							icon: 'success',
							position: 'bottom',
							});
					}, 500);
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}else{
					this.$refs["passInput"].close();
				}
			},
			close(){
				
			}
		}
	}
</script>

<style lang="scss">
.title {
	margin: 20upx 4% 20upx 4%;
	font-weight: bold;
	font-size: $font-size-34;
	line-height: 50upx;
	.bl{
		border-radius: 6upx;
		float:left;
		margin-right:20upx;
		background-color: #36B957;
		margin-top:5upx;
		height:40upx;
		width:10upx;
	}
		
}
.base-info{
	padding:0;
	.info-item{
		display: flex;
		border-bottom: 1px solid #F2F2F2;
		margin:0upx 25upx;
		padding: 10rpx 0;
		.text{
			text-align-last:justify;
			font-size: 28upx;
			flex:1;
			text-align: center;
			line-height: 76upx;
			font-weight: bold;
		}
		.select-box{
			flex: 4;
			background-image: url("@/static/img/icons-black.png");
			background-repeat: no-repeat;
			background-position: 95% 50%;
			background-size: 20upx 30upx;
			text{
				margin-left:40upx;
				font-size: 28upx;
				line-height: 76upx;
			}
		}
		i-input{
			flex: 4;
		}
		.space{
			flex: 4;
		}
	}
}
.submitBtn{
	
	margin: 40upx 4% 20upx 4%;
	width:92%;
	height:80upx;
	line-height: 80upx;
	color:white;
	border-radius: 35upx;
	background-color: #5FDB7E;
}
</style>
